<template>
	
	<view class="lt-container">
	  <!-- 1. 背景视觉层 (模拟空间站内部) -->
	  <view class="bg-layer">
	    <view class="orbit-ring r1"></view>
	    <view class="orbit-ring r2"></view>
	    <text class="bg-watermark">CONFIDENTIAL // HR</text>
	  </view>
	
	  <!-- 2. 加载状态 -->
	  <view v-if="!reportData" class="loading-box">
	    <view class="tech-spinner"></view>
	    <text class="loading-text">ANALYZING DATA...</text>
	  </view>
	
	  <!-- 3. 报告主内容 -->
	  <view v-else class="main-content">
	    
	    <!-- 顶部 Header -->
	    <view class="header-section">
	      <view class="top-meta">
	        <text class="doc-id">NO.{{ recordId || '000000' }}</text>
	        <text class="doc-date">TERRA 1099</text>
	      </view>
	      
	      <view class="title-block">
	        <text class="main-title">EVALUATION</text>
	        <text class="sub-title">面试评估报告</text>
	      </view>
	
	      <!-- 标志性的三色条 -->
	      <view class="tri-color-bar">
	        <view class="bar b-r"></view>
	        <view class="bar b-y"></view>
	        <view class="bar b-g"></view>
	      </view>
	    </view>
	
	    <scroll-view scroll-y class="scroll-viewport">
	      
	      <!-- 核心评分卡 -->
	      <view class="score-panel">
	        <view class="score-circle-outer">
	          <view class="score-circle-inner">
	            <text class="score-val">{{ reportData.overall_score }}</text>
	            <text class="score-tag">SCORE</text>
	          </view>
	        </view>
	        <view class="score-summary">
	          <view class="panel-label">/// SUMMARY 综合评价</view>
	          <text class="summary-text">{{ reportData.overall_evaluation }}</text>
	        </view>
	      </view>
	
	      <!-- 能力维度 (自定义进度条风格) -->
	      <view class="metrics-panel">
	        <view class="panel-label">/// METRICS 能力维度</view>
	        <view class="metrics-list">
	          <view v-for="(item, index) in reportData.dimension_scores" :key="index" class="metric-item">
	            <view class="metric-head">
	              <text class="metric-name">{{ item.name || item.dimensionName }}</text>
	              <text class="metric-val">{{ item.score }}</text>
	            </view>
	            <view class="tech-progress">
	              <!-- 动态宽度绑定 -->
	              <view class="tech-progress-fill" :style="{ width: Number(item.score) + '%' }"></view>
	            </view>
	          </view>
	        </view>
	      </view>
	
	      <!-- 分析卡片组 -->
	      <view class="analysis-grid">
	        <!-- 优势 -->
	        <view class="analysis-card card-green">
	          <view class="card-head">
	            <text>ADVANTAGE</text>
	            <text class="card-icon">+</text>
	          </view>
	          <text class="card-body">{{ reportData.strengths }}</text>
	        </view>
	
	        <!-- 劣势 -->
	        <view class="analysis-card card-orange">
	          <view class="card-head">
	            <text>DEFICIT</text>
	            <text class="card-icon">-</text>
	          </view>
	          <text class="card-body">{{ reportData.weaknesses }}</text>
	        </view>
	      </view>
	
	      <!-- 建议模块 -->
	      <view class="suggestion-panel">
	        <view class="panel-label">/// DIRECTIVE 改进建议</view>
	        <view class="suggestion-box">
	          <text>{{ reportData.suggestions }}</text>
	          <view class="box-corner"></view>
	        </view>
	      </view>
	      
	      <!-- 底部垫高 -->
	      <view style="height: 40rpx;"></view>
	    </scroll-view>
	
	    <!-- 底部按钮 -->
	    <view class="footer-area">
	      <button class="lt-btn" @click="goBackHome">
	        <text class="btn-icon">RETURN TO TERMINAL</text> 
	      </button>
	    </view>
	
	  </view>
	
	  <!-- 消息提示 -->
	  <!-- 如果项目中没有 u-toast，请删除此行或替换为 uni.showToast -->
	  <u-toast ref="uToast"></u-toast>
	</view>
	
	
	
</template>
 
<script>
import { genReport } from "../../api/report/report"

export default {
  data() {
    return {
      recordId: null,
      reportData: null // 初始为空
    }
  },
  onLoad(options) {
    // 1. 获取 ID
    if (options.recordId) {
      this.recordId = options.recordId
    } else {
      this.recordId = uni.getStorageSync("interviewRecord")
    }

    // 2. 发起请求
    if (this.recordId) {
      this.getReportData()
    }
  },
  methods: {
    getReportData() {
      genReport(this.recordId).then(res => {
        console.log("孤星风格报告数据:", res.data);
        if (res.code === 200) {
          this.reportData = res.data;
        }
      }).catch(err => {
        // 使用原生 toast 防止无 uview 时报错
        uni.showToast({ title: '数据获取失败', icon: 'none' })
      })
    },
    goBackHome() {
      // 返回首页逻辑
      uni.reLaunch({
        url: '/pages/interview/interview'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* === 孤星风格配色变量 === */
$lt-bg: #E6E8EB;      /* 银灰背景 */
$lt-card: #FFFFFF;    /* 卡片白 */
$lt-text-main: #1a1a1a;
$lt-text-sub: #666666;
$lt-border: #cccccc;
$c-red: #9A332D;      /* 孤星红 */
$c-yellow: #E6A73C;   /* 孤星黄 */
$c-green: #79BBA9;    /* 孤星青 */

.lt-container {
  width: 100vw;
  height: 100vh;
  background-color: $lt-bg;
  color: $lt-text-main;
  font-family: Helvetica, sans-serif; /* 推荐使用无衬线字体 */
  position: relative;
  overflow: hidden;
}

/* === 1. 背景装饰 === */
.bg-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.bg-watermark {
  position: absolute;
  bottom: 10%; right: -50rpx;
  font-size: 120rpx; font-weight: 900;
  color: rgba(0,0,0,0.03);
  transform: rotate(-90deg);
}
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 2rpx solid rgba(255,255,255,0.6);
  left: 50%; top: 40%;
  transform: translate(-50%, -50%) scaleY(0.6); /* 压扁模拟透视 */
}
.r1 { width: 600rpx; height: 600rpx; }
.r2 { width: 900rpx; height: 900rpx; border-style: dashed; opacity: 0.4; }

/* === 2. 加载动画 === */
.loading-box {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; z-index: 99;
}
.tech-spinner {
  width: 60rpx; height: 60rpx;
  border: 4rpx solid $c-green; border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}
.loading-text {
  font-size: 24rpx; letter-spacing: 2rpx; color: $lt-text-sub;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === 3. 主内容布局 === */
.main-content {
  position: relative; z-index: 10;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}

/* 头部 Header */
.header-section {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 2rpx solid rgba(0,0,0,0.05);
}
.top-meta {
  display: flex; justify-content: space-between;
  font-size: 20rpx; color: $lt-text-sub; font-weight: bold;
  margin-bottom: 10rpx;
}
.title-block { margin-bottom: 20rpx; }
.main-title { font-size: 60rpx; font-weight: 900; letter-spacing: 2rpx; line-height: 1; display: block;}
.sub-title { font-size: 24rpx; color: $lt-text-sub; letter-spacing: 4rpx; text-transform: uppercase;}

/* 三色条 */
.tri-color-bar {
  display: flex; height: 8rpx; width: 100%;
  .bar { flex: 1; height: 100%; }
  .b-r { background: $c-red; }
  .b-y { background: $c-yellow; }
  .b-g { background: $c-green; }
}

/* 滚动区域 */
/* 滚动区 */
.scroll-viewport {
  flex: 1; 
  /* --- 核心修复代码开始 --- */
  height: 0;  /* 强制高度为0，由 flex: 1 自动撑开 */
  width: 100%; /* 确保宽度 */
  /* --- 核心修复代码结束 --- */
  
  padding: 30rpx 40rpx;
  box-sizing: border-box;
}

/* 通用面板样式 */
.panel-label {
  font-size: 24rpx; font-weight: bold; color: $lt-text-sub;
  margin-bottom: 20rpx; border-bottom: 2rpx solid #ccc;
  padding-bottom: 8rpx; letter-spacing: 1rpx;
}

/* 评分卡片 */
.score-panel {
  background: $lt-card;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex; align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  /* 切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
}
.score-circle-outer {
  width: 140rpx; height: 140rpx;
  border: 2rpx solid $c-green; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  margin-right: 30rpx; flex-shrink: 0;
}
.score-circle-inner {
  width: 120rpx; height: 120rpx;
  background: $lt-text-main; border-radius: 50%;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.score-val { font-size: 48rpx; font-weight: bold; line-height: 1; }
.score-tag { font-size: 16rpx; opacity: 0.8; }

.score-summary { flex: 1; }
.summary-text { font-size: 26rpx; line-height: 1.6; text-align: justify; }

/* 维度列表 */
.metrics-panel {
  background: $lt-card; padding: 30rpx; margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}
.metric-item { margin-bottom: 24rpx; }
.metric-head { display: flex; justify-content: space-between; margin-bottom: 8rpx; font-size: 24rpx; font-weight: bold;}
.metric-val { color: $c-green; }

/* 自定义硬朗风格进度条 */
.tech-progress {
  height: 12rpx; background: #eee; width: 100%;
  transform: skewX(-20deg); /* 倾斜 */
  overflow: hidden;
}
.tech-progress-fill {
  height: 100%; background: $c-green;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 分析卡片 */
.analysis-grid {
  display: flex; gap: 20rpx; margin-bottom: 30rpx;
}
.analysis-card {
  flex: 1; background: $lt-card; padding: 20rpx;
  border: 2rpx solid transparent;
}
.card-head {
  font-size: 20rpx; font-weight: bold; display: flex; justify-content: space-between;
  margin-bottom: 10rpx; border-bottom: 2rpx dashed #eee; padding-bottom: 10rpx;
}
.card-body { font-size: 24rpx; color: $lt-text-main; line-height: 1.5; }

.card-green { border-top: 6rpx solid $c-green; }
.card-green .card-head { color: $c-green; }

.card-orange { border-top: 6rpx solid $c-yellow; }
.card-orange .card-head { color: $c-yellow; }

/* 建议面板 */
.suggestion-panel {
  background: $lt-card; padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}
.suggestion-box {
  position: relative;
  padding: 20rpx; background: rgba(0,0,0,0.03);
  border-left: 6rpx solid $c-red;
  font-size: 26rpx; line-height: 1.8; text-align: justify;
}
/* 右下角装饰 */
.box-corner {
  position: absolute; bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 20rpx 20rpx;
  border-color: transparent transparent $c-red transparent;
}

/* 底部按钮区 */
.footer-area {
  padding: 30rpx 40rpx;
  background: rgba(255,255,255,0.9);
}
.lt-btn {
  width: 100%; height: 100rpx;
  background: $lt-text-main; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32rpx; font-weight: bold; letter-spacing: 2rpx;
  border-radius: 0; /* 无圆角 */
  /* 按钮切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
}
.lt-btn:active { transform: scale(0.98); opacity: 0.9; }
.btn-icon { margin-right: 10rpx; font-family: monospace; }

</style>